<!--
 * @Description:图片淡入淡出
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-06 05:51:24
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>图片淡入淡出</title>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			background: red;
			opacity: 0.3;
		}
	</style>
	<script>
		window.onload = function () {
			var alpha=30;
			var timer=null;
			let odiv = document.getElementById("div1")
      odiv.onmouseover=function(){
				startMove(100)
			}
			odiv.onmouseout=function(){
			startMove(30)
			}


       function startMove(itarget){
				 clearInterval(timer)
				 timer=setInterval(()=>{
					 var speed=0;
					 if(alpha<itarget){
						 speed=2
					 }else{
						 speed=-2
					 }
					 if(alpha==itarget){
						 clearInterval(timer)
					 }else{
						 alpha+=speed
						 odiv.style.opacity=alpha/100
					 }

					
				 },30)
			 }
		}
	</script>
</head>

<body>
	<div>
		运动的框架 关闭已有的定时器<br>
		把运动和停止的隔开（if/else)<br>
		左负右正
	</div>
	<div id="div1">
		<span>分享到</span>
	</div>
</body>

</html>